<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>Portfolio Flipping Slider Using jQuery & CSS3 | Webstuffshare.com</title>
  <meta name="description" content="Tutorial : Portfolio Flipping Slider Using jQuery & CSS3">
  <meta name="author" content="Webstuffshare">
  <link rel="stylesheet" href="demo.css?v=2">
  <script src="javascript/modernizr.custom.34807.js"></script>
</head>
<body>

  <div id="container">
    
    <span id="information" style="display:none">Your browser doesn't support CSS3 3D Transform</span>
    <h1>Portfolio Flipping Slider Using jQuery & CSS3</h1>
    <em><a href="http://www.webstuffshare.com/?p=2637">&bull; read tutorial &bull;</a></em>
    
    <div id="portfolio"></div>
    
    <ul id="portfolio-item">
      <li><img src="images/dumptruck_teaser.jpeg" alt="Dump Truck" /></li>
      <li><img src="images/rrwooo_rrwooo_teaser.jpeg" alt="Rrwooo" /></li>
      <li><img src="images/dozer_teaser.jpeg" alt="Dozer" /></li>
      <li><img src="images/ltah_teaser.jpeg" alt="Ltah" /></li>
      <li><img src="images/pirates_teaser.jpeg" alt="Pirates" /></li>
      <li><img src="images/rustler_teaser.jpeg" alt="Rustler" /></li>
      <li><img src="images/satellite_teaser.jpeg" alt="Satellite" /></li>
      <li><img src="images/werewolf_teaser.jpeg" alt="Werewolf" /></li>
      <li><img src="images/box_socks_teaser.jpeg" alt="Box Socks" /></li>
      <li><img src="images/capt_kidd_teaser.jpeg" alt="Capt Kidd" /></li>
      <li><img src="images/bat_bedtime_teaser.jpeg" alt="Bat Bedtime" /></li>
      <li><img src="images/grrr_teaser.jpeg" alt="Grrr" /></li>
      <li><img src="images/eensy_teaser.jpeg" alt="Eensy" /></li>
      <li><img src="images/derby_lady_teaser.jpeg" alt="Derby Lady" /></li>
      <li><img src="images/carrot_teaser.jpeg" alt="Carrot" /></li>
      <li><img src="images/brush_teaser.jpeg" alt="Brush" /></li>
      <li><img src="images/nunatakdribbble_teaser.jpeg" alt="Nunatak" /></li>
      <li><img src="images/reefdribbble_teaser.jpeg" alt="Reef" /></li>
      <li><img src="images/glacier_teaser.jpeg" alt="Glacier" /></li>
      <li><img src="images/carddribbble_teaser.jpeg" alt="Card" /></li>
      <li><img src="images/cove_teaser.jpeg" alt="Cove" /></li>
      <li><img src="images/canal_teaser.jpeg" alt="Canal" /></li>
      <li><img src="images/shot_1300121080_teaser.jpeg" alt="Biome" /></li>
      <li><img src="images/shot_1300969987_teaser.jpeg" alt="Globe" /></li>
      <li><img src="images/bestican_teaser.jpeg" alt="Bestican" /></li>
      <li><img src="images/bifocal_teaser.jpeg" alt="Bifocal" /></li>
      <li><img src="images/soupsearch_teaser.jpeg" alt="Soup Search" /></li>
      <li><img src="images/sub_teaser.jpeg" alt="Submarine" /></li>
      <li><img src="images/tomatosoup_teaser.jpeg" alt="Tomato Soup" /></li>
      <li><img src="images/harry_teaser.jpeg" alt="Hipster Harry" /></li>
      <li><img src="images/for_the_man_teaser.jpeg" alt="For The Man" /></li>
      <li><img src="images/extra_teaser.jpeg" alt="Indulgence" /></li>
    </ul>
    
    <nav id="navigation">
      <a href="#1" class="nav selected" data-page="1">1</a>
      <a href="#2" class="nav" data-page="2">2</a>
      <a href="#3" class="nav" data-page="3">3</a>
      <a href="#4" class="nav" data-page="4">4</a>
    </nav>
    
  </div>  
  
  <script> if(!Modernizr.csstransforms3d) document.getElementById('information').style.display = 'block'; </script>
  <script>!window.jQuery && document.write(unescape('%3Cscript src="javascript/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
  <script src="javascript/demo.js"></script>
</body>
</html>